<template>
  <div>
      <div class="panel overview">
        <div class="inner">
          <ul>
            <li>
              <h4>2,190</h4>
              <span>
                <i class="icon-dot" style="background-color: #006cff"></i>
                设备总数
              </span>
            </li>
            <li class="item">
              <h4>190</h4>
              <span>
                <i class="icon-dot" style="background-color: #6acca3"></i>
                季度新增
              </span>
            </li>
            <li>
              <h4>3,001</h4>
              <span>
                <i class="icon-dot" style="background-color: #6acca3"></i>
                运营设备
              </span>
            </li>
            <li>
              <h4>108</h4>
              <span>
                <i class="icon-dot" style="background-color: #ed3f35"></i>
                异常设备
              </span>
            </li>
          </ul>
        </div>
      </div>
  </div>
</template>

<script>
export default {

}
</script>

<style scoped>
  .overview {
    height: 1.7rem;
  }
  .overview ul{
    display: flex;
    justify-content: space-between;
  }
  .overview ul li h4{
    font-size: 0.45rem;
    color: #fff;
    font-weight: 400;
    margin: 0 0 0.1rem 0.0rem;
  }
  .overview ul li span {
    font-size: 0.27rem;
    color: #4c9bfd;
  }
  .icon-dot{
    display: inline-block;
    width: 5.5px;
    height: 11px;
    border-radius: 4px;
  }
</style>